<script setup lang="ts">
import {
  Container,
  Deployment,
  DeploymentStrategy
} from "@/views/domain/kubeHud/api/k8s/types";
import KContainer from "../../components/KContainer.vue";
import KSpace from "../../components/KSpace.vue";
import { IconConcurrency } from "@/views/domain/kubeHud/views/k8s/components/icons";
import { computed, ref } from "vue";
import PodAffinitySelector from "./PodAffinitySelector.vue";
import { useDeploymentEditor } from "./createProvider";
import { ElMessageBox } from "element-plus";
import ContainerEditForm from "./ContainerEditForm.vue";

const { editDeployment, editContext } = useDeploymentEditor();

const activeContainer = ref<Container>();

const createContainer = () => {
  const container = editContext.newContainerTpl();
  editDeployment.value.spec.template.spec.containers.push(container);
  setActiveContainer(container);
};

const createInitContainer = () => {
  const container = editContext.newContainerTpl();
  editDeployment.value.spec.template.spec.initContainers.push(container);
  setActiveContainer(container);
};

const setActiveContainer = (target?: Container) => {
  if (activeContainer.value === target) return;
  if (!activeContainer.value) {
    activeContainer.value = target;
    return;
  }
  ElMessageBox.alert("是否要切换容器", "切换容器", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    showCancelButton: true,
    type: "warning"
  }).then(() => {
    activeContainer.value = target;
  });
};
</script>

<template>
  <el-form v-model="editDeployment" class="form-wrapper">
    <div class="flex w-full h-full gap-2">
      <el-collapse class="container-list" :model-value="['pods', 'init']">
        <el-collapse-item title="工作容器" name="pods">
          <div
            v-for="c in editDeployment.spec.template.spec.containers"
            :key="c.name"
            :class="[
              'container-row',
              { 'container-active': activeContainer === c }
            ]"
            @click="setActiveContainer(c)"
          >
            <span class="name">{{ c.name ?? "未命名" }}</span>
            <span class="image">{{ c.image ?? "-" }}</span>
          </div>
          <el-button
            icon="Plus"
            size="small"
            type="primary"
            class="w-full"
            @click="createContainer"
          >
            添加
          </el-button>
        </el-collapse-item>
        <el-collapse-item title="初始化容器" name="init">
          <div
            v-for="c in editDeployment.spec.template.spec.initContainers"
            :key="c.name"
            :class="[
              'container-row',
              { 'container-active': activeContainer === c }
            ]"
          />
          <el-button
            icon="Plus"
            size="small"
            type="success"
            class="w-full"
            @click="createInitContainer"
          >
            添加
          </el-button>
        </el-collapse-item>
      </el-collapse>

      <div class="flex-1">
        <ContainerEditForm
          v-if="activeContainer"
          v-model:container="activeContainer"
          v-model:image-pull-secrets="
            editDeployment.spec.template.spec.imagePullSecrets
          "
        />
        <el-empty v-else description="请选择一个容器" />
      </div>
    </div>
  </el-form>
</template>
<style lang="scss" scoped>
.form-wrapper {
  :deep(.el-collapse-item__content) {
    padding-bottom: 5px;
  }
}

.container-list {
  --el-collapse-border-color: #00000000;
  width: 200px;
}

.container-row {
  width: 100%;
  padding: 5px;
  border: 1px solid var(--el-border-color);
  border-radius: 8px;
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
  cursor: pointer;

  .name {
    font-size: 12px;
    font-weight: bold;
  }

  .image {
    font-size: 10px;
    color: var(--el-text-color-secondary);
  }
}

.container-active {
  border: 1px solid var(--el-color-primary);
}
</style>
